<!-- 上网行为日志 -->
<template>
  <div class="actionLog">
    <header class="actionLog-header">
      <SearchBar 
       @educe="educe"
       @query="query"/>
    </header>

    <main class="actionLog-main">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="table-border"
        :header-cell-style="{ background: '#ebeef5' }"
        :header-cell-class-name="handleHeaderClass"
        @sort-change="handleTableSort"
      >
        <el-table-column 
         v-for="(item , index) in tableHeader"
         :key="index"
         :prop="item.prop" 
         :label="item.label" 
         :min-width="item.width"
         :sortable="item.labelSupportSort === 1 ? 'custom' : false"
         :sort-orders="['descending', 'ascending', null]"
        >
        </el-table-column>
      </el-table>

       <!-- 分页器 -->
       <pagination
        :total="total"
        :page.sync="page.pageNumber"
        :limit.sync="page.pageSize"
        @pagination="getList"
      />
    </main>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { SearchBar } from "./components/index";
import Pagination from "@/components/Pagination";
import action from '@/api/internetManagement';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { SearchBar , Pagination },
  data() {
    //这里存放数据
    return {
      tableData: [],

      tableHeader: [ //表格头部数据
        {
          label:'客户IP地址',
          prop:'sourceIp',
        },
        {
          label:'端口',
          prop:'sourcePort',
        },
        {
          label:'mac地址',
          prop:'sourceMac',
        },
        {
          label:'行为类型',
          prop:'actionType',
        },
        {
          label:'下载速度',
          labelSupportSort:1,
          prop:'downloadSpeed',
        },
        {
          label:'上传速度',
          labelSupportSort:1,
          prop:'uploadSpeed',
        },
        {
          label:'小时累计下载',
          labelSupportSort:1,
          prop:'cumulativeDownloads',
        },
        {
          label:'小时累计上传',
          labelSupportSort:1,
          prop:'cumulativeUpload',
        },
      ],

       page:{ //分页器数据
         pageNumber:1,
         pageSize:10
      },

      total: 0,

      searchValue:{}, //搜索值

      ordersList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {

     //获取表格数据
    getList() {
      let data = {...this.page , ...this.searchValue}
      action.selectTrafficStatistics(data).then(res=>{
        this.total = res?.data?.total;
        this.tableData = res?.data?.records;
      })
    },
    //导出文件
    educe() {
      action.surfExportData(this.searchValue)
    },

    //查询
    query(value) {
      this.searchValue = value;
      this.page.pageNumber = 1;
      this.getList()
    },

    // 设置列的排序为我们自定义的排序
    handleHeaderClass({ column }) {
        column.order = column.multiOrder
    },

  handleOrderChange (orderColumn, orderState) {
      let result = this.ordersList.find(e => e.orderColumn === orderColumn)
      if (result) {
          result.orderState = orderState
      } else {
          this.ordersList.push({
              orderColumn: orderColumn,
              orderState: orderState
          })
      }

      console.log(this.ordersList);
      // 调接口查询，在传参的时候把ordersList进行处理成后端想要的格式
      // this.getDataList()
  },
// 列表排序
    handleTableSort({ column }) {
        // 有些列不需要排序，提前返回
        if (column.sortable !== 'custom') {
            return
        }
        if (!column.multiOrder) {
            column.multiOrder = 'descending'
        } else if (column.multiOrder === 'descending') {
            column.multiOrder = 'ascending'
        } else {
            column.multiOrder = ''
        }
        this.handleOrderChange(column.property, column.multiOrder)
    },

    //解析排序数据
    sortingParsing() {
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList()
   this.timer = setInterval(() => {
      this.getList()
    }, 1000*60*10);
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  }
};
</script>

<style lang='scss' scoped>
.actionLog {
  padding: 20px;
  .actionLog-main {
    margin-top: 20px;
  }
}
</style>